<template>
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">基本信息</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-jibenxinxi1" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>姓名： {{detailsData.name}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dianhua" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>联系电话： {{detailsData.phone}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-gongsi" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>工作单位： {{detailsData.workUnit}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-gangwei" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>工作岗位： {{detailsData.workPosition}}</text>
			</view>
		</view>
	</uni-card>
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">擅长领域</text>
			</view>
			<view style="padding:  0 10px;">
				{{detailsData.skilledField}}
			</view>
		</view>
	</uni-card>
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">技能证书</text>
			</view>
			<view style="padding:  0 10px;">
				{{detailsData.skillsCertificate}}
			</view>
		</view>
	</uni-card>
	<view style="padding-bottom: 10px;">
		<uni-card spacing="0">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">个人简介</text>
				</view>
				<view style="padding:  0 10px;">
					{{detailsData.personalProfile}}
				</view>
			</view>
		</uni-card>
	</view>

	<view class="sticky-b10 p10">
		<navigator :url="'/pages/student/consult/expert/apply?itemID=' + detailsData.id + '&name=' + detailsData.name"  hover-class="none" open-type="redirect">
			<button type="default" class="basicbutton m10" hover-class="basicbutton-hover">咨询</button>
		</navigator>
	</view>
</template>

<script lang="ts" setup>
	import { Expert } from "@/api/tables/Expert"
	import { expertDetail } from "@/api/consult"
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	let detailsData = ref<Expert>({});

	onLoad((option) => {
		getDetail(option.itemID)
	});
	function getDetail(id) {
		expertDetail({ id }).then(res => {
			if (res.code == '200') {
				detailsData.value = res.data
			}
		})
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #01c2b7;
			font-weight: 600;
		}

		.title1 {
			padding-top: 10px;
			font-size: 26rpx;
			line-height: 2;
			font-weight: 600;
			color: #01c2b7;
		}

		.location {
			width: calc(100% - 80px);
			font-size: 12px;
		}

		.navigation {
			margin-left: 10px;
			text-align: center;
			line-height: 1.5;
			width: 70px;
			font-size: 12px;
			color: #2b9395;
			border: 1px solid #2b9395;
			border-radius: 18px;
		}
	}

	.sticky-b10 {
		position: sticky;
		bottom: 0rpx;
		background: #f5f5f5;
	}
</style>